<template>
    <div>
     <!--面包屑导航区-->
     <el-breadcrumb separator-class="el-icon-arrow-right">
           <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
           <el-breadcrumb-item>商品管理</el-breadcrumb-item>
           <el-breadcrumb-item>商品分类</el-breadcrumb-item>
       </el-breadcrumb>
          <!--卡片视图-->
        <el-card>
            <el-button type="primary" @click="addCateDialog">添加分类</el-button>
            <!--表格-->
            <tree-table :data="catelist" :columns="columns"
            :selection-type="false" :expand-type="false" :show-index="true"
            index-text="#" border :show-row-hover="false" class="tt" >
            <template slot="isok" slot-scope="scope">
                 <i class="el-icon-error" v-if="scope.row.cat_deleted === false" style="color: lightgreen;"></i>
                 <i class="el-icon-success" v-else style="color: red;"></i>
             </template>
            <template slot="level" slot-scope="scope">
                <el-tag   v-if="scope.row.cat_level===0">级别一</el-tag>
                <el-tag type="success" v-else-if="scope.row.cat_level===1">级别二</el-tag>
                <el-tag type="warning" v-else>级别三</el-tag>
            </template>
            <template slot="work" slot-scope="scope">
              <el-button type="warning" plain icon="el-icon-edit" @click="editCateDialog(scope.row)">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" @click="deleteCate(scope.row)">删除</el-button>
            </template>
            </tree-table>
    <!--用户分页区域-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="qeryinfo.pagenum"
                    :page-sizes="[1, 2, 5, 10]"
                    :page-size="qeryinfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        <!--添加分类对话框-->
        <el-dialog
        title="增加角色"
        :visible.sync="addCateDialogVisible"
        width="36%"
        @close="addCateDialogClosed">
        <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
          <el-form-item label="分类名称" prop="cat_name">
                <el-input v-model="addCateForm.cat_name"></el-input>
          </el-form-item>
          <div width="100%">
          <el-form-item label="父级分类：">
            <!--options 用来指定数据源-->
            <!--props 用来指定配置对象-->
            <el-cascader
                expand-trigger="hover"
                :options="parentCateList" 
                v-model="selectedKeys"
                :props='cascaderProps'
                @change="parentCateChange"
                clearable
                change-on-select
            ></el-cascader>
         </el-form-item>
        </div>
        </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="addCateDialogVisible= false">取 消</el-button>
      <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>
        <!--修改分类对话框-->
        <el-dialog
        title="修改分类"
        :visible.sync="editCateDialogVisible"
        width="36%"
        @close="editCateDialogClosed">
        <el-form :model="catelist" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
          <el-form-item label="分类名称" prop="cat_name">
                <el-input v-model="catelist.cat_name"></el-input>
          </el-form-item>
        </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="editCateDialogVisible= false">取 消</el-button>
      <el-button type="primary" @click="editCate">确 定</el-button>
      </span>
    </el-dialog>
     </el-card>  
    </div>
</template>
<script>
export default{
    data(){
        return{
            //商品种类的数据列表
            catelist:[],
            //查询条件
            qeryinfo:{
                type:3,
                pagenum:1,
                pagesize:6
            },
            total:0,
            //为table指定列的定义
            columns:[{
              label:"分类名称",
              prop:'cat_name'
            },{
                label:"是否有效",
                //表示，将当前定义为模版列
                type:'template',
                //表示，将当前这列使用的模版名称
                template:'isok'
            },{
                label:"排序",
                type:'template',
                //表示，将当前这列使用的模版名称
                template:'level'
            },
            {
                label:"操作",
                type:'template',
                //表示，将当前这列使用的模版名称
                template:'work'
            }],
            addCateDialogVisible:false,
            addCateForm:{
                //父ID
                cat_pid:0,
                cat_name:'',
                //分类的等级，先默认为0
                cat_level:0
            },
            addCateFormRules:{
                cat_name:[
                { required: true, message: '请输入分类名称', trigger: 'blur' }
            ]
            },
            //父级分类的列表
            parentCateList:[],
            //指定级联选择器的配置对象
            cascaderProps:{
                value:'cat_id',
                label:'cat_name',
                children:'children'
            },
            //选中的父级分类的id数组
            selectedKeys:[],
            //修改分类对话框的可见性
            editCateDialogVisible:false
        }
    },
    created(){
        this.getCatList()
    },
    methods:{
        //获取商品分类数据
       async getCatList(){
        const {data:res}=await this.$http.get('categories',{params:this.qeryinfo})
        this.catelist=res.data.result
        if(res.meta.status!==200)return this.$message.error('获取分类列表失败')
        this.total=res.data.total
       },
        //监听pagesize改变的事件
      handleSizeChange(newSize){
        this.qeryinfo.pagesize=newSize
        this.getCatList()
      },
      //监听页码值
      handleCurrentChange(newPage) {
        this.qeryinfo.pagenum=newPage
        this.getCatList()
      },
      addCateDialog(){
        //先获取父级分类的数据列表
        this.getParentCateList()
        //再展示对话框
        this.addCateDialogVisible=true
        
      },
      addCateDialogClosed(){
        this.addCateDialogVisible=false
      },
      addCate(){
        
      },
      //获取父级分类的数据列表
      async getParentCateList(){
        const {data:res}=await this.$http.get('categories',{params:{
            type:2
        }}) 
        if(res.meta.status!==200)return this.$message.error('获取父级分类失败')
        this.parentCateList=res.data
        console.log(this.parentCateList)
      },
      //选择项发生 变化触发这个函数
      parentCateChange(){
        //如果selectedKeys数组中的length大于0，证明选中了父级分类，反之说明没有选中任何父级分类
        if(this.selectedKeys.length>0){
            // 父级分类的ID
            this.addCateForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
            this.addCateForm.cat_level=this.selectedKeys.length
            return
        }else{
            // 父级分类的ID
            this.addCateForm.cat_pid=0
            //为当前分类的等级赋值
            this.addCateForm.cat_level=0
        }        
      },
      //点击按钮，添加新的分类
      addCate(){
        this.$refs.addCateFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post(
          'categories',
          this.addCateForm
        )

        if (res.meta.status !== 201) {
          return this.$message.error('添加分类失败！')
        }

        this.$message.success('添加分类成功！')
        this.getCatList()
        this.addCateDialogVisible=false
        })       
      },
      //监听对话框的关闭事件，重置表单数据
      addCateDialogClosed(){
         this.$refs.addCateFormRef.resetFields()
         this.selectedKeys = []
         this.addCateForm.cat_level = 0
         this.addCateForm.cat_pid = 0
      },
      //显示修改对话框
      editCateDialog(row){
        this.catelist=row
        this.editCateDialogVisible= true
      },
      //点击按钮确定修改
      editCate(){
        this.$refs.addCateFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.put(
          `categories/${this.catelist.cat_id}`,
          {
            cat_name:this.catelist.cat_name
          }
        )
        if (res.meta.status !== 200) {
          return this.$message.error('修改失败！')
        }
        this.$message.success('成功修改！')
        this.getCatList()
        this.editCateDialogVisible= false})
      },
      //监听对话框关闭事件
      editCateDialogClosed(){
        this.catelist={}
      },
      async deleteCate(row){
      const {data:res}=await this.$http.delete(`categories/${row.cat_id}`)
      if(res.meta.status!==200)  return this.$message.error('删除失败')
      this.getCatList()
      this.$message.success('成功删除')
    }
    }
}
</script>
<style lang="less" scoped>
.tt{
    margin-top: 15px;
    font-size:18px;
}
.el-cascader {
    width: 100%;
  }
</style>